<template>
    <div class="foot">
        <ul>
            <li :class="{ 'active': flag === '/recordWeight' }" @click="goTab('/recordWeight')">
                <i class="iconfont icon-jilutizhong"></i>
                <div>记录体重</div>
            </li>
            <li :class="{ 'active': flag === '/recordDiet' }" @click="goTab('/recordDiet')">
                <i class="iconfont icon-jiankangjilu-yinshi"></i>
                <div>记录饮食</div>
            </li>
            <li :class="{ 'active': flag === '/recordSport' }" @click="goTab('/recordSport')">
                <i class="iconfont icon-jiluyundong"></i>
                <div>记录运动</div>
            </li>
            <li :class="{ 'active': flag === '/my' }" @click="goTab('/my')">
                <i class="iconfont icon-wodedangxuan"></i>
                <div>我的</div>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue';


const router = useRouter()
const flag = ref('/recordWeight')


const goTab = (path) => {
    router.push(`${path}`)
    router.beforeEach((to, from, next) => {
        flag.value = to.path
        // console.log(flag.value, path);
        next()
    })
}
</script>

<style lang="less" scoped>
.foot {
    width: 100%;
    position: fixed;
    bottom: 0;

    ul {
        width: 100%;
        display: flex;
        text-align: center;
        padding-top: 0.21rem;
        padding-bottom: .2667rem;

        li {
            flex: 1;
            color: #9CA3AF;

            &.active {
                color: #3176FF;
            }

            .iconfont {
                margin-bottom: .08rem;
            }

            div {
                font-weight: 400;
                font-size: 0.29rem;
                line-height: 0.37rem;

            }
        }
    }
}
</style>